<template>
    <div class="recent-play">
        <div>
            <van-nav-bar
                    title="最近收听"
                    left-text="返回"
                    right-text="清空"
                    left-arrow
                    @click-left="onClickLeft"
                    @click-right="onClickRight"
            />
        </div>
        <div class="lists" v-if="this.audios.length > 0">
            <audio-lists :items="audios" v-if="showLists"></audio-lists>
        </div>
        <van-empty description="空空如也" v-else />
    </div>
</template>

<script>
    import storage from 'good-storage'
    import AudioLists from '@/components/audio-lists/audio-lists';
    import Vue from 'vue';
    import {
        NavBar
        , Dialog
        ,Toast
        ,Empty
    } from 'vant';

    Vue.use(Dialog)
        .use(NavBar)
        .use(Toast)
        .use(Empty);

    // 本地缓存 - key
    var RPR = "RecentPlayRecord";
    export default {
        name: "recent-play",
        data() {
            return {
                audios: [],
                showLists: false
            }
        },
        created() {
            this.getRecentPlayRecord();
        },
        methods: {
            getRecentPlayRecord() {
                this.audios = storage.get(RPR) || [];
                this.showLists = true;
            },
            onClickLeft() {
                this.$router.push('/my');
            },
            onClickRight() {
                if(this.audios.length <= 0){
                    return;
                }
                Dialog.confirm({
                    title: '清空提示',
                    message: '清空之后将无法恢复，您确定需要清空播放记录吗？',
                })
                    .then(() => {
                        Toast("操作成功！");
                        this.audios = [];
                        storage.set(RPR, []);
                    })
                    .catch(() => {
                        // on cancel
                    });
            }
        },
        components: {
            AudioLists
        }
    }
</script>

<style scoped>
    .recent-play >>> .audios {
        margin-top: 40px;
    }
</style>